<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>color</title>
    <style>
        li:nth-child(2n) {
            background-color: red;
        }
        li:nth-child(2n-1) {
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li class="li-1">li_1</li>
        <li class="li-2">li_2</li>
        <li class="li-3">li_3</li><!-- 注释部分 -->
        <li class="li-4">li_4</li>
        <li class="li-5">li_5</li>
    </ul>


    <script>
        var liDom = document.getElementsByTagName('li');
        var ulEl = document.querySelector('ul');
        var lis = ulEl.childNodes;
        // console.log(liDom);
        // console.log(lis);
        for (var i = 0; i < lis.length; i++) {
            // 查看节点类型
            console.log(lis[i], lis[i].nodeType);    
        }

        var domNodes = getDomNodes(ulEl);
        console.log(domNodes);
        
        // 获取所有的dom元素（不包括空格和换行）
        function getDomNodes(fatherNode) {
            var domNodes = [];
            var lis = fatherNode.childNodes;

            for (var i = 0; i < lis.length; i++) {
                var domNode = lis[i];

                // 通过nodeType判断是否为所需节点
                if ( domNode.nodeType === 1 || domNode.nodeType === 8 ) {
                    domNodes.push(domNode)
                }
            }

            return domNodes;
        }
    </script>
</body>
</html>